<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>1.vue项目文件目录</title>
    <style>
        pre {
            font-size: 22px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <pre>
            1.什么是Vue-CLI(Command Line Interface)?
                Vue-CLI是vue官方提供的脚手架工具,
                默认已经帮我们搭建好了一套利用webpack管理vue的项目结构

            2.如何安装Vue-cli和使用Vue-CLI?
                安装脚手架工具: npm install -g @vue/cli
                检查是否安装成功: vue --version
                通过脚手架创建项目: vue create project-name

            3.通过Vue-CLI生成的项目结构解读
            3.1在Vue-CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹
                这两个文件夹中存储了webpack相关的配置, 我们可以针对项目需求修改webpack配置
            3.2在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹
                这么做的目的是为了化繁为简, 让初学者不用关心webpack, 只用关心如何使用Vue

            node_modules文件夹: 存储了依赖的相关的包
            public文件夹: 任何放置在 public 文件夹的静态资源都会被简单的复制，
            而不经过 webpack。你需要通过绝对路径来引用它们
            一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库
            src文件夹: 代码文件夹
                |----assets文件夹: 存储项目中自己的一些静态文件(图片/字体等)
                |----components文件夹: 存储项目中的自定义组件(小组件,公共组件)
                |----views文件夹: 存储项目中的自定义组件(大组件,页面级组件,路由级别组件)
                |----router文件夹: 存储VueRouter相关文件
                |----store文件夹: 存储Vuex相关文件
                |----App.vue:根组件
                |----main.js:入口js文件
            </pre>

        </p>

    </div>
</body>

<script type="text/javascript">

</script>

</html>